<template>
  <div class="customs-detail"
       :style="{height:HEIGHT+'px',paddingLeft:(WIDTH - 1024)/2+'px',paddingRight:(WIDTH - 1024)/2+'px'}">
    <!--顶部展示信息-->
    <h1 class="title">海关数据详情：</h1>
    <ul v-show="one.length>0">
      <li v-for="item,index in one" :key="index"><span>{{item.key}}:</span> <b v-html="filterStr(item.value)"></b></li>
    </ul>
    <ul v-show="two.length>0">
      <li v-for="item,index in two" :key="index"><span>{{item.key}}:</span> <b v-html="filterStr(item.value)"></b></li>
    </ul>
    <ul v-show="three.length>0">
      <li v-for="item,index in three" :key="index"><span>{{item.key}}:</span> <b v-html="filterStr(item.value)"></b></li>
    </ul>
    <ul v-show="four.length>0">
      <li v-for="item,index in four" :key="index"><span>{{item.key}}:</span> <b v-html="filterStr(item.value)"></b></li>
    </ul>
    <ul v-show="five.length>0">
      <li v-for="item,index in five" :key="index"><span>{{item.key}}:</span> <b v-html="filterStr(item.value)"></b></li>
    </ul>
    <ul v-show="six.length>0">
      <li v-for="item,index in six" :key="index"><span>{{item.key}}:</span> <b v-html="filterStr(item.value)"></b></li>
    </ul>
    <ul v-show="seven.length>0">
      <li v-for="item,index in seven" :key="index"><span>{{item.key}}:</span> <b v-html="filterStr(item.value)"></b></li>
    </ul>
    <ul v-show="end.length>0">
      <li v-for="item,index in end" :key="index"><span>{{item.key}}:</span> <b v-html="filterStr(item.value)"></b></li>
    </ul>
  </div>
</template>

<script>
    import {getDetail} from '@/api/automation/customs'

    export default {
        name: "index",
        data() {
            return {
                HEIGHT: document.documentElement.clientHeight,
                WIDTH: document.documentElement.clientWidth,
                one: [],
                two: [],
                three: [],
                four: [],
                five: [],
                six: [],
                seven: [],
                end: [],
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            filterStr(str) {
                if (str == '') {
                    return '-'
                } else {
                    return str
                }
            },
            getData() {
                let formData = new FormData();
                formData.append('basename', this.$route.params.basename);
                formData.append('param', this.$route.params.id);
                formData.append('tab', 0);
                formData.append('l', 'cn');
                getDetail(formData).then(res => {
                    const result = res.data.data.data;
                    if (res.data.success && result != '') {
                        let strs = result.split("|||");
                        let json_data = eval("(" + strs[0] + ")");
                        if (json_data.length > 0) {
                            json_data.map(item => {
                                //先进行正则匹配
                                if (item.value.trim() != "" && item.value.trim() != "-"
                                    && item.value.trim() != "&nbsp;"
                                    && item.value.trim() != "#VALUE!"
                                    && item.value.trim() != "NA"
                                    && item.value.trim() != "#N/A") {
                                    if (item.key == "ZIP CODE/邮编：" && item.value == "0") {
                                        item.key = item.key.replace("|Replace|", "/").replace("|Replace|", "/").replace(/_/gm, ' ')
                                    } else {
                                        item.key = item.key.replace("|Replace|", "/").replace("|Replace|", "/").replace(/_/gm, ' ')
                                        item.value = this.Pro(item.key, item.value)
                                    }
                                } else {
                                    item.key = item.key.replace("|Replace|", "/").replace("|Replace|", "/").replace(/_/gm, ' ')
                                }
                                //插入对应的数组
                                switch (this.DetailsType(item.key)) {
                                    case 1:
                                        this.one.push(item);
                                        break;
                                    case 2:
                                        this.two.push(item);
                                        break;
                                    case 3:
                                        this.three.push(item);
                                        break;
                                    case 4:
                                        this.four.push(item);
                                        break;
                                    case 5:
                                        this.five.push(item);
                                        break;
                                    case 6:
                                        this.six.push(item);
                                        break;
                                    case 7:
                                        this.seven.push(item);
                                        break;
                                    default:
                                        this.end.push(item)
                                }
                            })
                        } else {
                            return
                        }
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            Pro(key, value) {
                if (value == "无") {
                    return "-";
                } else if (key.indexOf("电话") != -1 && key.indexOf("国际电话区号") == -1) {
                    return "" + value.toLocaleUpperCase();
                } else if (key.indexOf("邮箱") != -1 || key.indexOf("电子邮件") != -1 || key.indexOf("电邮") != -1) {
                    return "" + value.replace("mailto:", "").toLocaleUpperCase() + "<a href=\"mailto:" + value.replace("mailto:", "") + "\"><img alt=\"\" src=\"images/email_detail.png\"></a>";
                } else if (key.indexOf("Web") != -1 || key.indexOf("web") != -1 || key.indexOf("WEB") != -1) {
                    return "<a href=\"http://" + value.replace("http://", "").replace("HTTP://", "").trim() + "\" target=\"_blank\">" + value.replace("http://", "").replace("HTTP://", "").toLocaleUpperCase() + "</a>";
                } else if (this.$route.params.basename == "GeorgiaS_im" || this.$route.params.basename == "GeorgiaS_ex") {
                    return value;
                } else if (value.indexOf('<a>google it</a>') != -1) {
                    return value.split('<a>google it</a>')[0]
                } else {
                    return value.toLocaleUpperCase();
                }
            },
            DetailsType(key) {
                var type = 6
                if (key.indexOf("Date".toUpperCase()) != -1 || key.indexOf("HS Code".toUpperCase()) != -1 || key.indexOf("Year".toUpperCase()) != -1 || key.indexOf("Month/月".toUpperCase()) != -1 || key.indexOf("DATE".toUpperCase()) != -1 || key.indexOf("YEAR".toUpperCase()) != -1 || key.indexOf("MONTH/月".toUpperCase()) != -1 || key.indexOf("COMMODITY/".toUpperCase()) != -1
                    || key.indexOf("HS CODE".toUpperCase()) != -1 || key.indexOf("NANDINA__HS".toUpperCase()) != -1 || key.indexOf("HARMONIZED_NUMBER".toUpperCase()) != -1 || key.indexOf("HS4".toUpperCase()) != -1) {
                    type = 1;
                } else if (key.indexOf("DESCRIPTION".toUpperCase()) != -1 || key.indexOf("Details".toUpperCase()) != -1 || key.indexOf("Description".toUpperCase()) != -1 || key.indexOf("Product".toUpperCase()) != -1 || key.indexOf("Porduct".toUpperCase()) != -1 || key.indexOf("ITMDSC".toUpperCase()) != -1 || key.indexOf("GOODS".toUpperCase()) != -1 || key.indexOf("COMM_DESC".toUpperCase()) != -1 || key.indexOf("Descrip".toUpperCase()) != -1
                    || key.indexOf("Detail".toUpperCase()) != -1 || key.indexOf("CodeDesc".toUpperCase()) != -1 || key.indexOf("CodeDesc".toUpperCase()) != -1 || key.indexOf("CodeDesc".toUpperCase()) != -1 || key.indexOf("PRODUCTS".toUpperCase()) != -1 || key.indexOf("Commodity".toUpperCase()) != -1 || key.indexOf("Merchandise".toUpperCase()) != -1) {
                    type = 2;
                } else if (key.indexOf("INN".toUpperCase()) != -1 || key.indexOf("Buyer".toUpperCase()) != -1 || key.indexOf("BUYER".toUpperCase()) != -1 || key.indexOf("Company".toUpperCase()) != -1 || key.indexOf("Supplier".toUpperCase()) != -1 || key.indexOf("Transport_Name".toUpperCase()) != -1 || key.indexOf("Transport Name".toUpperCase()) != -1 || key.indexOf("Address".toUpperCase()) != -1 || key.indexOf("Consignee".toUpperCase()) != -1 || key.indexOf("COMPANY NAME".toUpperCase()) != -1 || key.indexOf("ADDRESS".toUpperCase()) != -1
                    || key.indexOf("Shipper".toUpperCase()) != -1 || key.indexOf("Manufacturer".toUpperCase()) != -1 || (key.indexOf("Importer".toUpperCase()) != -1 && key.indexOf("Importer's City".toUpperCase()) == -1) || (key.indexOf("Exporter".toUpperCase()) != -1 && key.indexOf("City".toUpperCase()) == -1) || key.indexOf("IMPORTER".toUpperCase()) != -1 || key.indexOf("IMPADD".toUpperCase()) != -1 || key.indexOf("EXPORTER".toUpperCase()) != -1 || key.indexOf("CUSTOMS BROKER OFFICE".toUpperCase()) != -1
                    || key.indexOf("EXPADD".toUpperCase()) != -1 || key.indexOf("SUPPLIER".toUpperCase()) != -1 || key.indexOf("CONSIGNEE".toUpperCase()) != -1 || key.indexOf("Consigner".toUpperCase()) != -1 || key.indexOf("SHIPPER".toUpperCase()) != -1 || (key.indexOf("NOTIFY".toUpperCase()) != -1 && key.indexOf("SECONDARY_NOTIFY_PART".toUpperCase()) == -1) || (key.indexOf("IM|EX".toUpperCase()) != -1 && this.$route.params.basename.indexOf("SpainL_") != -1) || key.indexOf("Notify".toUpperCase()) != -1 || key.indexOf("Carrier".toUpperCase()) != -1) {
                    type = 3;
                } else if ((key.indexOf("Custom".toUpperCase()) != -1 && key.indexOf("Value".toUpperCase()) == -1 && key.indexOf("Declaration".toUpperCase()) == -1) || key.indexOf("Transport".toUpperCase()) != -1 || key.indexOf("Country".toUpperCase()) != -1 || key.indexOf("Port Name".toUpperCase()) != -1 || key.indexOf("Province".toUpperCase()) != -1 || key.indexOf("Origin".toUpperCase()) != -1
                    || key.indexOf("Point".toUpperCase()) != -1 || key.indexOf("Departure".toUpperCase()) != -1 || (key.indexOf("Port".toUpperCase()) != -1 && key.indexOf("EXPORT".toUpperCase()) == -1) || (key.indexOf("Mode".toUpperCase()) != -1 && key.indexOf("Model".toUpperCase()) == -1) || key.indexOf("Destination".toUpperCase()) != -1 || key.indexOf("DESTINATION".toUpperCase()) != -1 || key.indexOf("Ctry of Foreign".toUpperCase()) != -1
                    || key.indexOf("PRTSHP".toUpperCase()) != -1 || key.indexOf("SLINE".toUpperCase()) != -1 || key.indexOf("SAGENT".toUpperCase()) != -1 || key.indexOf("COUNTRY".toUpperCase()) != -1 || key.indexOf("ORIGIN".toUpperCase()) != -1 || key.indexOf("CONSIGNATION".toUpperCase()) != -1 || key.indexOf("City".toUpperCase()) != -1
                    || key.indexOf("CUSTOM".toUpperCase()) != -1 || key.indexOf("Shipment Method".toUpperCase()) != -1 || key.indexOf("PAIS TRANSPORTISTA".toUpperCase()) != -1 || key.indexOf("PORT OF LOADING".toUpperCase()) != -1 || key.indexOf("PORT OF DELIVERY".toUpperCase()) != -1 || key.indexOf("CTY_".toUpperCase()) != -1 || key.indexOf("DIST".toUpperCase()) != -1 || key.indexOf("CTRY OF FOREIGN".toUpperCase()) != -1 || key.indexOf("INDIAN PORT".toUpperCase()) != -1 || key.indexOf("Warehouse".toUpperCase()) != -1) {
                    type = 4;
                } else if (key.indexOf("Statistical_Qty".toUpperCase()) != -1 || key.indexOf("Statistical_Unit".toUpperCase()) != -1 || key.indexOf("Quantity".toUpperCase()) != -1 || key.indexOf("Unit".toUpperCase()) != -1 || key.indexOf("CIF".toUpperCase()) != -1 || key.indexOf("Weight".toUpperCase()) != -1 || key.indexOf("FOB".toUpperCase()) != -1 || key.indexOf("DUTY(INR)".toUpperCase()) != -1
                    || key.indexOf("Value".toUpperCase()) != -1 || key.indexOf("Impressive cost".toUpperCase()) != -1 || key.indexOf("Exchange rate".toUpperCase()) != -1 || key.indexOf("Aval".toUpperCase()) != -1 || key.indexOf("Uval".toUpperCase()) != -1 || key.indexOf("Duty".toUpperCase()) != -1 || key.indexOf("Amount".toUpperCase()) != -1 || key.indexOf("Currency".toUpperCase()) != -1 || key.indexOf("VOLUME".toUpperCase()) != -1
                    || key.indexOf("PACKAGE".toUpperCase()) != -1 || key.indexOf("GRSWT".toUpperCase()) != -1 || key.indexOf("QUANTITY".toUpperCase()) != -1 || key.indexOf("UOM".toUpperCase()) != -1 || key.indexOf("INS".toUpperCase()) != -1 || key.indexOf("FRT".toUpperCase()) != -1 || key.indexOf("Taxes Bol".toUpperCase()) != -1 || key.indexOf("VFD".toUpperCase()) != -1 || key.indexOf("FRT".toUpperCase()) != -1
                    || key.indexOf("RE EXPORT QNN".toUpperCase()) != -1 || key.indexOf("RE EXPORT VULY".toUpperCase()) != -1 || key.indexOf("VALUE".toUpperCase()) != -1 || key.indexOf("Rate".toUpperCase()) != -1 || key.indexOf("UNIT".toUpperCase()) != -1 || key.indexOf("EXCHANGE RATE".toUpperCase()) != -1 || key.indexOf("WEIGHT".toUpperCase()) != -1 || key.indexOf("Number on Packing List".toUpperCase()) != -1
                    || key.indexOf("Qty".toUpperCase()) != -1 || key.indexOf("Number of Pieces".toUpperCase()) != -1 || key.indexOf("Freight".toUpperCase()) != -1 || key.indexOf("Insurance".toUpperCase()) != -1 || key.indexOf("Packages".toUpperCase()) != -1 || key.indexOf("QTY".toUpperCase()) != -1 || key.indexOf("_VAL_".toUpperCase()) != -1 || key.indexOf("_WGT_".toUpperCase()) != -1 || key.indexOf("QY1_".toUpperCase()) != -1 || key.indexOf("QY2_".toUpperCase()) != -1 || key.indexOf("Package Number".toUpperCase()) != -1 || key.indexOf("MEASUREMENT".toUpperCase()) != -1 || key.indexOf("DUTY".toUpperCase()) != -1) {
                    type = 5;
                } else if (key.indexOf("BLNO".toUpperCase()) != -1 || key.indexOf("Tel".toUpperCase()) != -1 || key.indexOf("CEO".toUpperCase()) != -1 || key.indexOf("Trade mark".toUpperCase()) != -1 || key.indexOf("Trade Term".toUpperCase()) != -1 || key.indexOf("Budget Ins. Code".toUpperCase()) != -1 || key.indexOf("Bank".toUpperCase()) != -1 || key.indexOf("Account NO.".toUpperCase()) != -1 || key.indexOf("Guarantor".toUpperCase()) != -1
                    || key.indexOf("SITC".toUpperCase()) != -1 || key.indexOf("NORDIC COUNTRIES".toUpperCase()) != -1 || key.indexOf("EFTA".toUpperCase()) != -1 || key.indexOf("EC".toUpperCase()) != -1 || key.indexOf("DEVELOPING COUNTRIES".toUpperCase()) != -1 || key.indexOf("COMECON".toUpperCase()) != -1 || key.indexOf("GSP COUNTRIES".toUpperCase()) != -1 || key.indexOf("OECD".toUpperCase()) != -1 || key.indexOf("CONTINENTS".toUpperCase()) != -1
                    || key.indexOf("COMMODITY CLASSIFICATION".toUpperCase()) != -1 || key.indexOf("CONTINENTS".toUpperCase()) != -1) {
                    type = 6;
                } else if (key.indexOf("Contact".toUpperCase()) != -1 && this.$route.params.basename.indexOf("SpainL_") != -1) {
                    type = 7;
                }
                return type;
            }
        }
    }
</script>

<style scoped lang="scss">
  .customs-detail {
    overflow-y: scroll;

    .title {
      font-size: 18px;
      color: #0a6cd6;
      padding-top: 20px;
    }

    ul {
      background-color: #fff;
      border-radius: 10px;
      margin-top: 20px !important;
      padding: 15px !important;

      li {
        line-height: 45px;
        color: #232323;
        padding: 0 15px;
        border-bottom: 1px solid #dddddd2e;

        span {
          color: #2A97F9;
          font-size: 14px;
        }

        b {
          font-weight: normal;
          padding-left: 10px;
          font-size: 13px;
        }
      }

      li:last-child {
        border-bottom: 0;
      }
    }
  }
</style>
